<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 画垂直和水平线
    drawLine(0, 250, 500, 250)
    drawLine(250, 0, 250, 500)

    // 画虚线
    ctx.setLineDash([5, 10])
    drawLine(0, 0, 500, 500, 'red')
    drawLine(0, 500, 500, 0, 'red')

    // 画文字
    drawText("米", 250, 250)

    /**
     * 画出直线方法
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     * @param color
     * @param width
     */
    function drawLine(x1, y1, x2, y2, color, width = 2) {
        // 画图开始:开启一条路径
        ctx.beginPath()
        // 确定起始点
        ctx.moveTo(x1, y1)
        // 确定结束点
        ctx.lineTo(x2, y2)
        // 在着色之前设置颜色和线宽
        ctx.strokeStyle = color
        ctx.lineWidth = width
        // 着色
        ctx.stroke()
        // 结束路径可以不关闭
        ctx.closePath()
    }

    /**
     * 画文字
     * @param text
     * @param x
     * @param y
     */
    function drawText(text, x, y) {
        ctx.font = '400px 楷体'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(text, x, y)
    }
</script>
</body>
</html>
